import { Box, Flex, Text } from 'gestalt';

function ReactionLove() {
  return (
    <svg fill="none" height="14" viewBox="0 0 17 14" width="17" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M14.7867 1.23333C16.4067 2.88 16.4067 5.56 14.7867 7.20667L8 14L1.21333 7.20667C0.406667 6.38 0 5.3 0 4.22C0 3.14 0.406667 2.06 1.21333 1.23333C2.84 -0.406667 5.48 -0.406667 7.1 1.23333L8 2.14667L8.89333 1.23333C9.70667 0.413333 10.7733 0 11.84 0C12.9067 0 13.9733 0.413333 14.7867 1.23333Z"
        fill="#FF5246"
      />
      <path
        d="M10.8267 7.58666C10.8267 7.59999 10.8333 7.61333 10.8333 7.62666C10.8333 9.16666 9.56666 10.42 8 10.42C6.43333 10.42 5.16666 9.17333 5.16666 7.62666C5.16666 7.61333 5.17333 7.59999 5.17333 7.58666C6.01333 8.03333 6.98 8.28666 8 8.28666C9.02 8.28666 9.98666 8.02666 10.8267 7.58666ZM4.66666 3.75333C3.97333 3.75333 3.41333 4.31333 3.41333 5.00666C3.41333 5.69999 3.97333 6.25333 4.66666 6.25333C5.36 6.25333 5.91333 5.69333 5.91333 4.99999C5.91333 4.30666 5.36 3.75333 4.66666 3.75333ZM11.3333 3.75333C10.64 3.75333 10.08 4.31333 10.08 5.00666C10.08 5.69999 10.64 6.25333 11.3333 6.25333C12.0267 6.25333 12.5867 5.69333 12.5867 4.99999C12.5867 4.30666 12.0267 3.75333 11.3333 3.75333Z"
        fill="#720906"
      />
    </svg>
  );
}

export default function Example() {
  return (
    <Box alignItems="center" display="flex" height="100%" justifyContent="center" padding={8}>
      <Flex
        alignItems="center"
        gap={{
          row: 1,
          column: 0,
        }}
      >
        <ReactionLove />
        <Text>2.8k</Text>
      </Flex>
    </Box>
  );
}
